<template>
	<div class="validate-record-container">
		<div class="table-container">
			<ValidateTable class="validate-table" :validateData="validateData" v-if="validateData.list.length !== 0" />
		</div>
		<div class="validate-record">
			<MessageRecord class="message-record" :msgData="msgData" v-if="msgData.list.length !== 0" />
		</div>
	</div>
</template>

<script>
import ValidateTable from './FileComponent/ValidateTable.vue';
import MessageRecord from './FileComponent/MessageRecord.vue';
import { getSessionValidateTable, getSessionMessageRecord } from '@/api/api';

export default {
	components: {
		ValidateTable,
		MessageRecord
	},
	props: {
		sessionId: {
			type: String,
			require: true,
			default: () => ''
		}
	},
	data() {
		return {
			validateData: {
				total: '',
				list: []
			},
			msgData: {
				total: 2,
				list: []
			}
		};
	},
	mounted() {
		this.initValidateTable();
		this.initMessageRecord();
	},
	methods: {
		initValidateTable() {
			getSessionValidateTable(this.sessionId)
				.then(res => {
					console.log(res.data, '全局校验table');
					this.validateData.total = res.data.total;
					this.validateData.list = res.data.list.map(item => {
						// 洗数据，把一列数组转换成table渲染的一行数据
						let data = [];
						let obj = {};
						obj.name = '是否开启活体检测';
						obj.option = item.faceRecognition.enabled ? '开启' : '关闭';
						obj.status = item.livenessDetection.enabled ? '开启' : '关闭';
						let obj2 = {};
						obj2.name = '检测时间间隔';
						obj2.option = item.faceRecognition.interval ? item.faceRecognition.interval : '- -';
						obj2.status = item.livenessDetection.interval ? item.livenessDetection.interval : '- -';
						let obj3 = {};
						obj3.name = '阈值';
						obj3.option = item.faceRecognition.threshold ? item.faceRecognition.threshold : '- -';
						obj3.status = item.livenessDetection.threshold ? item.livenessDetection.threshold : '- -';
						data.push(obj, obj2, obj3);
						return {
							agentName: item.agentName,
							data: data
						};
					});
					console.log(this.validateData.list, '洗数据');
				})
				.catch(err => {
					// this.$message.error('获取全局校验详情失败！');
					this.$requestApiError(err, () => {
						this.$router.push('/');
					});
				});
		},
		initMessageRecord() {
			getSessionMessageRecord(this.sessionId)
				.then(res => {
					console.log(res.data, '信息校验Message');
					this.msgData.total = res.data.total;
					this.msgData.list = res.data.list.map(item => {
						if (item.content && item.content.startsWith('http://zco-fileupload.oss-cn-shanghai.aliyuncs.com')) {
							item.content = item.content.replace('http://zco-fileupload.oss-cn-shanghai.aliyuncs.com', 'https://zco-fileupload.zealcomm.cn');
							console.log(item.content);
						}
						return {
							isRobot: item.isRobot,
							agentName: item.agentName,
							agentAvatar: item.agentAvatar,
							customerName: item.customerName,
							type: item.type,
							content: item.content,
							result: item.result,
							createdAt: this.$moment(item.createdAt).format('YYYY-MM-DD HH:mm:ss')
						};
					});
				})
				.catch(err => {
					console.log(err);
					// this.$message.error('获取全局信息校验详情失败！');
				});
		}
	}
};
</script>

<style lang="less" scoped>
.validate-record-container {
	padding: 20px;
	.table-container {
		display: flex;
		flex-wrap: wrap;
		.validate-table {
			padding-right: 14px;
		}
	}
	.validate-record {
		padding-top: 24px;
		.message-record {
			padding: 20px;
		}
		.white {
			background-color: #fff;
		}
		.gray {
			background: #f7f8f9;
		}
	}
}
</style>
